<!-- 加热炉生产记录查询 -->
<template>
  <query-template
    page-title="加热炉生产记录"
    main-table-title="生产记录列表"
    detail-table-title="记录明细"
    :query-api="queryApi"
    :main-table-columns="mainTableColumns"
    :custom-params="customParams"
    :custom-form-data="customFormData"
    show-custom-filters
    :data-formatter="dataFormatter"
  >
    <!-- 自定义筛选条件插槽 -->
    <template #custom-filters="{ handleCustomFilterChange }">
      <view class="query-picker">
        <view class="input-content">
          <text class="input-label">炉次号:</text>
          <input
            class="input-field"
            type="text"
            v-model="furnaceNo"
            placeholder="请输入炉号"
            @input="
              (e) => {
                handleFurnaceNoInput(e);
                handleCustomFilterChange('furnaceNo', e.detail.value);
              }
            "
          />
        </view>
      </view>
    </template>
  </query-template>
</template>

<script>
// 导入通用查询模板
import QueryTemplate from "@/pages/smart/utils/query.vue";
import { ZgRecordFurnaceApi } from "@/api/lz/zgrecordfurnace";

export default {
  name: "SxQuery",
  components: {
    QueryTemplate,
  },
  data() {
    return {
      // 炉号输入
      furnaceNo: "",
      // 自定义表单数据
      customFormData: {
        furnaceNo: "",
      },
      // 自定义查询参数
      customParams: {
        // 这里可以添加额外的查询参数
      },
      // 主表列配置
      mainTableColumns: [
        {
          title: "业务日期",
          dataIndex: "ywDate",
          dataType: "date",
        },
        {
          title: "炉号",
          dataIndex: "furnaceNo",
          defaultValue: "-",
        },
        {
          title: "钢种",
          dataIndex: "steelGradeName",
          defaultValue: "-",
        },
        {
          title: "批号",
          dataIndex: "batchNo",
          defaultValue: "-",
        },
        {
          title: "钢锭支数",
          dataIndex: "costCount",
          dataType: "number",
          defaultValue: 0,
        },
        {
          title: "钢锭重量(KG)",
          dataIndex: "costWg",
          dataType: "number",
          precision: 3,
          defaultValue: 0,
        },
        {
          title: "转料方式",
          dataIndex: "costMeth",
          defaultValue: "-",
        },
        {
          title: "班次",
          dataIndex: "workShift",
          defaultValue: "-",
        },
        {
          title: "班别",
          dataIndex: "wortkType",
          defaultValue: "-",
        },
        {
          title: "入炉时间",
          dataIndex: "batchBegin",
          dataType: "date",
        },
        {
          title: "出炉时间",
          dataIndex: "batchEnd",
          dataType: "date",
        },
        {
          title: "点火时间",
          dataIndex: "furnaceBegin",
          dataType: "date",
        },
        {
          title: "停火时间",
          dataIndex: "furnaceEnd",
          dataType: "date",
        },
        {
          title: "入炉工",
          dataIndex: "workStaffIn",
          defaultValue: "-",
        },
        {
          title: "出炉工",
          dataIndex: "workStaffOut",
          defaultValue: "-",
        },
        {
          title: "业务备注",
          dataIndex: "busMemo",
          defaultValue: "-",
        },
      ],
    };
  },

  methods: {
    /* 炉号输入处理 */
    handleFurnaceNoInput(e) {
      const value = e.detail.value;
      this.furnaceNo = value;

      // 更新自定义表单数据
      this.customFormData.furnaceNo = value;
    },

    // 查询API方法
    queryApi(params) {
      return ZgRecordFurnaceApi.getZgRecordFurnacePage(params);
    },

    // 主表数据格式化函数（可选）
    dataFormatter(data) {
      // 可以在这里对主表数据进行额外处理
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 自定义筛选条件样式 */
.query-picker {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  min-width: 100rpx;
}

.picker-value {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  padding: 0 20rpx;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 输入框样式 */
.input-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  min-width: 100rpx;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  padding: 0 20rpx;
  border: none;
  background: transparent;
  outline: none;

  &::placeholder {
    color: #ccc;
  }
}

/* 移除不需要的picker样式 */
.picker-content,
.picker-value,
.picker-arrow {
  display: none;
}
</style>
